<template>
  <div class="page">
    <u-navbar title="店铺结算"> </u-navbar>
    <div class="drop-list"  :style="{paddingTop:statusBarHeight + 'px' }">
      <div class="drop-list-tab">
        <u-tabs :list="list" active-color="#333" :current="current" @change="changeTabs"></u-tabs>
      </div>
      <div class="drop-list-config" @click="handleClickScreen">
        <div>
          筛选
        </div>
      </div>
    </div>

    <div class="global-list" v-if="billData.length != 0">
      <div class="global-item" @click="handleClickBill(item)" v-for="(item,index) in billData" :key="index">

        <div class="flex global-top-col">
          <div class="global-sn">{{item.sn}}</div>
          <div class="global-orderStatus">{{item.billStatus | billStatus}}</div>
        </div>

        <div class="global-bottom-col flex">
          <div class="global-createTime">生成时间{{item.createTime}}</div>
          <div class="global-createTime">结算时间{{item.endTime}}</div>
        </div>
        <div class="goods-follow-price">
          申请金额：<span>￥{{item.billPrice| unitPrice}}</span>
        </div>

      </div>
    </div>

    <popup date ref="popup" @callback="screened" />

  </div>
</template>

<script>
import { getBillPage } from "@/api/shops";
import popup from "@/components/m-popup/index";
let systemInfo = uni.getSystemInfoSync();
export default {
  components: {
    popup,
  },
  watch: {
    current(index) {
      this.searchForm.billStatus = this.list[index].value;
      this.load();
    },
  },
  filters: {
    billStatus(val) {
      let status = {
        OUT: "已出账",
        CHECK: "已对账",
        EXAMINE: "已审核",
        COMPLETE: "已完成",
      };
      return status[val];
    },
  },
  data() {
    return {
			statusBarHeight: systemInfo.statusBarHeight,
      billData: [], //投诉列表
      current: 0,
      searchForm: {
        // 搜索框初始化对象
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        sort: "createTime", // 默认排序字段
        order: "desc", // 默认排序方式
        startDate: "", // 起始时间
        endDate: "", // 终止时间
      },
      list: [
        {
          name: "全部",
          value: "",
        },
        {
          name: "已出账",
          value: "OUT",
        },
        {
          name: "已对账",
          value: "CHECK",
        },
        {
          name: "已审核",
          value: "EXAMINE",
        },
        {
          name: "已完成",
          value: "COMPLETE",
        },
      ],
    };
  },

  methods: {
    clear(){
      this.searchForm.startDate = "";
      this.searchForm.endDate = "";
      this.searchForm.pageNumber = 1;
      this.billData = [];
      this.init();
    },
    onShow() {
      this.billData = [];
      this.searchForm.pageNumber = 1;
      this.init();
    },
    onReachBottom() {
      this.searchForm.pageNumber++;
      this.init();
    },
    // 点击订单
    handleClickBill(val) {
      uni.navigateTo({
        url: `/pages/order/bill/detail?id=${val.id}`,
      });
    },
    // 筛选回调
    screened(val) {
      val.date[0] ? (this.searchForm.startDate = `${val.date[0]} 00:00:00`) : this.searchForm.startDate ="";
      val.date[1] ? (this.searchForm.endDate = `${val.date[1]} 23:23:59`) : this.searchForm.endDate ="";
      this.load();
    },

    // 点击筛选
    handleClickScreen() {
      this.$refs.popup.open();
    },
    changeTabs(index) {
      this.current = index;
    },

    load() {
      this.searchForm.pageNumber = 1;
      this.billData = [];
      this.init();
    },
    async init() {
      uni.showLoading({
        title: "加载中",
      });

      //商品订单
      let res = await getBillPage(this.searchForm);
      if (res.data.success) {
        this.billData.push(...res.data.result.records);
      }

      uni.hideLoading();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/components/global.scss";

.global-bottom-col {
  margin: 0;
}
.global-createTime {
  margin: 10rpx 0;
}
.drop-list-tab {
  overflow: hidden;
  flex: 4 !important;
}
.drop-list-config {
  flex: 1;
  padding-bottom: 10rpx;
}
@media screen and(min-width:750rpx) {
		/deep/ .u-navbar-inner{
			height: 100rpx !important;
		}
		/deep/ .u-navbar-placeholder{
			height: 100rpx !important;
		}
	}
</style>